<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户设置</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/userSeting.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/index/logo.png" alt="" class="logo">
            <ul class="">
                <li class="check"><a href="../index.html">首页</a></li>
                <li><a href="./online.html">同步课程</a></li>
                <li><a href="javascript:;">在线练习</a></li>
                <li><a href="javascript:;">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容">
                <img src="../img/index/search.png" alt="">
            </div>
            <div class="user">
                <img src="../img/login/user.png" alt="" class="mylog">
                <div class="userlist">
                    <ul>
                        <li>我是用户名</li>
                        <li> <a href="./course.html">课程中心</a> </li>
                        <li><a href="./product.html">订单中心</a></li>
                        <li>资金管理</li>
                        <li><a href="./userSeting.html">个人中心</a></li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <!-- 主体内容 -->
    <main>
        <div class="leftNav" id="leftNav">
            <ul>
                <li class="list">
                    <p class="class">
                        <span>课程中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select"><a href="./course.html">我的课程</a></li>
                        <li class="select">我的练习</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="order">
                        <span>订单中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select">我的订单</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="money">
                        <span>资金管理</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select">我的钱包</li>
                        <li class="select">优惠券</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="center">
                        <span>个人中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select active">账户设置</li>
                        <li class="select">我的消息</li>
                        <li class="select">我的评价</li>
                    </ol>
                </li>
            </ul>
        </div>
        <div class="rightUser">
            <div class="title_top">
                <span>账户设置</span>
                <span>&gt;</span>
                <span>个人中心</span>
            </div>
            <div class="title_center">
                <span>学员档案</span>
            </div>
            <div class="content_show">
                <form action="" id="upimg" enctype="multipart/form-data">
                    <div class="my_icon">
                        <span>头像</span>
                        <a href="javascript:;">
                            <img src="../img/login/user.png" class="myIcon" />
                            <div class="change">
                                更换头像
                                <input type="file" name="logo" class="btn_file" />
                            </div>
                        </a>
                    </div>
                </form>
                <div class="my_name">
                    <div class="my_name_left">
                        <span>真实姓名</span>
                        <input type="text" name="username" id="" placeholder="方便老师联系你，只能修改一次哦～">
                    </div>
                    <div class="my_name_right">
                        <span>昵称</span>
                        <input type="text" name="user_name" id="">
                    </div>
                </div>
                <div class="my_sex">
                    <div class="my_name_left">
                        <span>学员性别</span>
                        <label for=""><input type="radio" name="sex" id="man"><span>男</span></label>
                        <label for=""><input type="radio" name="sex" id="woman"><span>女</span></label>
                    </div>
                    <div class="my_name_right">
                        <span>生日</span>
                        <input type="text" name="user_name" id="">
                    </div>
                </div>
                <div class="my_phone">
                    <div class="my_name_left">
                        <span>联系方式</span>
                        <strong>1111</strong>
                    </div>
                </div>
                <div class="my_learn">

                    <div class="my_name_right">
                        保存
                    </div>
                </div>
            </div>
        </div>
        <div style="clear: both;"></div>
    </main>
    <!-- 底部栏 -->
    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照 | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备 01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 | 食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>

    <!-- 固定导航 -->
    <div class="fix">
        <div class="lesson">
            <img src="../img/index/mylesson.png" alt="">
        </div>
        <div class="test">
            <img src="../img/index/mytest.png" alt="">
        </div>
        <div class="top">
            <img src="../img/index/gotop.png" alt="">
        </div> 
    </div>
    <script src="../js/userSeting.js"></script>

    <script src="../js/jquery.js"></script>
    <script src="../js/common.js"></script>

    <script>
        // console.log($("#upimg"));
        console.log(new FormData($("#upimg")[0]));
        $(".btn_file").change(function() {
            $.ajax({
                // url: 'http://localhost:3000/userlogo',
                url: 'http://49.235.224.225:3001/userlogo',

                type: 'post',
                data: new FormData($("#upimg")[0]), //把含有文件上传的表单提交到到后端
                dataType: 'json',
                processData: false, //设置jquery不处理表单中的数据
                contentType: false, //设置jquery不处理表单的编码
                headers: { //通过ajax请求头传递数据
                    Authorization: localStorage['jwtdatas']
                },
                success(d) {
                    $(".myIcon").attr('src', d.data);
                    console.log(d, 999);
                    $('.mylog').attr('src', d.data);
                },
                error(e) {
                    console.log(e, 111);
                }
            });
        })

        $('nav .user .out').click(function() {
            location.href = '../index.html';
            localStorage.removeItem('jwtdatas');
        });
 
        // 渲染用户数据信息
        async function getUserinfo() {
            let jwtdata = localStorage['jwtdatas'];
            let [err, obj] = await sendAjax('/userinfo', 'get', {
                jwtdata,
            });

            let d = obj.data;
            console.log(d, 888);
            let logurl = `http://49.235.224.225:3001/${d[0].head_photo_url}`

            $(".myIcon").attr('src', logurl);
            $('.mylog').attr('src', logurl);

            $('.my_name .my_name_left input').val(d[0].realname);
            $('.my_name .my_name_right input').val(d[0].createdate);

            $('.my_phone .my_name_left strong').html(d[0].username);
            $('.my_sex .my_name_right input').val(d[0].birthdate);

            if (d[0].sex == '1') {
                $('#man').attr('checked', true);
            } else {
                $('#woman').attr('checked', true);
            }

        }
        getUserinfo();
        $('.search img').click(function(){
            location.href = './search_list.html'
        });
      // 修改用户信息
    $('.my_learn .my_name_right').click(async function(){
        let jwtdata = localStorage['jwtdatas'];
        let realname = $('.my_name .my_name_left input').val();
          
           let birthday = $('.my_sex .my_name_right input').val();
           let sex = '';
            if($('#man').prop("checked")){
                 sex = 1;
            }else{
                sex = 2;
            }
        let [err, obj] = await sendAjax('/userinfo', 'post', {
                jwtdata,
                realname, 
                sex, 
                birthday
            });

            console.log(obj,2222);
            if(err){
                alert('修改成功！')
            }
    })
    </script>
</body>

</html>